<template>
    <FormProvider :form="form">
        <SchemaField>
            <SchemaObjectField name="CustomDemo01" x-component="CustomDemo01" :x-component-props="{
                schema: {
                    type: 'object',
                    properties: {
                        input: {
                            type: 'string',
                            'x-component': 'Input',
                        },
                    },
                }
            }" @dataFromChild="handleDataFromChild" />
        </SchemaField>
        <p>从子组件接收到的数据: {{ receivedData }}</p>
    </FormProvider>
</template>

<script setup>
import { ref } from 'vue';
import { Input } from 'ant-design-vue';
import { createForm } from '@formily/core';
import { FormProvider, createSchemaField } from '@formily/vue';
import CustomDemo01 from './CustomDemo01.vue';

const { SchemaField, SchemaObjectField } = createSchemaField({
    components: {
        CustomDemo01,
        Input,
    },
});

const form = ref(createForm());
const receivedData = ref('');

// 处理子组件传递的数据
const handleDataFromChild = (data) => {
    console.log('父组件接收到数据:', data);
    receivedData.value = data;
};
</script>